<template>
	<view class="content">
		<login-notice-view v-if="showLogin"/>
		<block v-else>
			<empty-view v-if="items.length == 0"/>
			<view class="message_cell_content app_content_color" v-for="(item,index) in items" :key="index" :data-item="item" @tap="cellTap">
				<image class="message_cell_avatar app_background_color" mode="aspectFill" :src="item.toUserAvatar" @tap="avatarTap" :data-item="item"></image>
				<view class="message_cell_info_content">
					<view class="message_cell_info_row_content">
					<view class="message_cell_info_title app_title_color">{{item.toUserName}}</view>
					<view style="flex-grow: 1;"/>
					<view class="message_cell_info_time_text app_subtitle_color">{{item.showTime}}</view>
					</view>
					<view class="message_cell_info_desc app_subtitle_color">{{item.lastSummary}}</view>
				</view>
			</view>
			
		</block>
	</view>
</template>

<style lang="scss">
	.content{
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	.message_cell_content {
		display: flex;
		margin-top: 1upx;
		width: 100%;
		flex-direction: row;
	}

	.message_cell_avatar {
		width: 80upx;
		height: 80upx;
		min-width: 80upx;
		max-width: 80upx;
		border-radius: 40upx;
		margin-top: 30upx;
		margin-left: 30upx;
	}

	.message_cell_info_content {
		display: flex;
		margin-left: 20upx;
		flex-direction: column;
		flex-grow: 1;
		margin-top: 30upx;
		margin-bottom: 30upx;
		margin-right: 30upx;
	}

	.message_cell_info_title {
		font-size: 30upx;
		word-wrap:break-word;
		max-width: 600upx;
		
	}
	
	.message_cell_info_desc {
		font-size: 26upx;
		word-wrap:break-word;
		max-width: 600upx;
		margin-top: 20upx;
	}

	.message_cell_info_row_content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.message_cell_info_time_text {
		font-size: 20upx;
		margin-right: 40upx;
		margin-top: 20upx;
	}

</style>

<script>
	import http from "../../utils/http.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				items:[],
				page:1,
				showLogin:true
			}
		},
		onLoad(){
			this.loadData()
		},
		onPullDownRefresh(){
			this.loadData()
		},
		onReachBottom(){
			this.loadMoreData();
		},
		onShow() {
			let showLogin = getApp().globalData.user == null
			if(this.showLogin != showLogin){
				this.showLogin = showLogin
				if(!showLogin){
					this.loadData()
				}
			}
		},
		methods: {
			loadData(){
				var that = this;
				http.request("message/pmsessionlist",{json:"{\"pageSize\" : 20,\"page\" : 1}"},{
					success:function(data){
						console.log(data)
						uni.stopPullDownRefresh();
						that.items = data.body.list.map(function(item){
							item.showTime = util.dateStringFromTimestamp(item.lastDateline);
							return item;
						})
						that.page = 2;
						uni.removeTabBarBadge({
							index:3
						})
					},
					fail: function(msg) {
						uni.stopPullDownRefresh();
						uni.showToast({
							title:msg,
							icon:"none"
						})
					}
				})
			},
			loadMoreData(){
				var that = this;
				http.request("message/pmsessionlist",{json:"{\"pageSize\" : 20,\"page\" : "+this.page+"}"},{
					success:function(data){
						var items = that.items.concat( data.body.list.map(function(item){
							item.showTime = util.dateStringFromTimestamp(item.lastDateline);
							return item;
						}))
						that.items = items;
						that.page ++;
					},
					fail: function(msg) {
						uni.showToast({
							title:msg,
							icon:"none"
						})
					}
				})
			},
			cellTap(e){
				var item = e.currentTarget.dataset.item;
				uni.navigateTo({
					url:"../message-detail/message-detail?fromUid="+item.toUserId
				})
			},
			avatarTap(e){
				var item = e.currentTarget.dataset.item;
				uni.navigateTo({
					url:"/pages/other-user/other-user?uid="+item.user_id
				})
			}
		}
	}
</script>

